import React from 'react'
import { Form, Input, Button, Space, message } from 'antd';
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { login, ILoginData } from '../../api'
// 函数组件
const App: React.FC = () => {
  const navigate = useNavigate()
  const onFinish = async (values: any) => {
    const resp = await login(values)
    const { code, token } = resp.data
    if (code === 200) {
      localStorage.setItem('token', token);
      navigate('/', { replace: false })
    } else {
      message.error('账户密码错误，请重新登录')
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div style={{
      width: 500,
      position: 'fixed',
      left: "50%",
      top: '50%',
      transform: 'translate(-50%, -50%)'
    }}>
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >

        <Form.Item
        >
          <h1 style={{ textAlign: 'center' }}>用户登录</h1>
        </Form.Item>
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button type='primary' htmlType="submit" danger>
              注册
            </Button>
          </Space>

        </Form.Item>
      </Form>
    </div>
  )
}

export default App